<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>default</title>
    <script>
        var Num_span=53;//span的数目
        var s=0;
        var count=0;
        var index=0;
        var length=new Array();
        var plus=new Array();
        function coding(){
            for(var i=1;i<=Num_span;i++){
                length[i-1]=document.getElementById("s"+i+"_hiding").innerHTML.length;
            }
            for(var i=0;i<Num_span;i++)
            {
                plus[i]=0;
                for(var j=0;j<=i;j++)
                {plus[i]+=length[j];}
            }
            s=setInterval(sub_Coding,1); //每隔150ms函数sub_Coding运行一次，直到用clearInterval(s)函数
        }
        function which_span(count){
            if(count==plus[Num_span-1]) clearInterval(s);
            for(var i=0;i<Num_span-1;i++){
                if(count==plus[i]) index=0;
                if(count>=plus[i]&&count<plus[i+1]){
                    return i+2;
                }
            }
            return 1;
        }
        function sub_Coding(){
            var string;
            string=document.getElementById("s"+which_span(count)+"_hiding").innerHTML;
            document.getElementById("s"+which_span(count)).innerHTML+=string.charAt(index);
            index++;
            count++;
        }//function sub_Coding()
    </script>
</head>
<style>
    body{
        background: none repeat scroll 0 0 #FFFFEE;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    #code{
        margin-left:100px;
        margin-top:100px;
        color: #333333;
        font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";
        font-size: 12px;
        height:600px;
    }
    .content{
    }
    .comments{
        color:#3F7F5F;
        padding-left:15px;
    }
    .keywords{
        color:#7F0055;
        font-weight:bold;
    }
    .string{
        color:#2A36FF;
    }

    #copyright{
        text-align:center;
        width:500px;
        color: #333333;
        float: left;
        font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";
        font-size: 12px;
    }
</style>
<body onLoad="coding()">
    <div id="app">
        <div id="code_hiding" style="display:none">

            <span id="s1_hiding" class="comments">// As Mr_11 very care about Miss_11:30. he changed to sleep at 12:00 from that time</span><br/>
            <span id="s2_hiding" >Sir Mr_12 = </span>
            <span id="s3_hiding" class="keywords">new</span>
            <span id="s4_hiding" > Sir(</span>
            <span id="s5_hiding" class="string">"sleep at 12"</span>
            <span id="s6_hiding">);</span><br/>

            <span id="s7_hiding">Lady Miss_11:30 = </span>
            <span id="s8_hiding" class="keywords">new</span>
            <span id="s9_hiding" > Lady(</span>
            <span id="s10_hiding" class="string">"sleep at 11:30"</span>
            <span id="s11_hiding">);</span><br/>
            <span id="s12_hiding" class="comments">//Miss_11:30 returned home at 11:00 regularly. when the wash finished, time was close to her sleep time.</span><br/>
            <span id="s13_hiding" > Miss_11:30.wash(</span>
            <span id="s14_hiding" class="string">"10min"</span>
            <span id="s15_hiding">);</span><br/>
            <span id="s16_hiding" class="comments">//Sometimes Miss_11:30 opened Wechat for a while if she felt happy and leisure.</span><br/>
            <span id="s17_hiding" class="keywords">boolean </span>
            <span id="s18_hiding" >isLeisure = </span>
            <span id="s19_hiding" class="keywords">true</span>
            <span id="s20_hiding" >;</span><br/>
            <span id="s21_hiding" class="keywords">if</span>
            <span id="s22_hiding" >(isLeisure) {</span><br/>
            <span id="s23_hiding" class="comments">//She replied to Mr_12 out of politeness.this eternel politeness sometimes disappointed Mr_12.</span><br/>
            <span id="s24_hiding" >Miss_11:30.open_Wechat(</span>
            <span id="s25_hiding" class="string">"see what Mr_12 sent to her and reply"</span>
            <span id="s26_hiding">);</span><br/>
            <span id="s27_hiding">}</span><br/>
            <span id="s28_hiding" class="comments">//Mr_12 was waiting for her from 10:00 p.m. He got more and more happy when time closed.</span><br/>
            <span id="s29_hiding" class="keywords">boolean </span>
            <span id="s30_hiding" >isMissed = </span>
            <span id="s31_hiding" class="keywords">true</span>
            <span id="s32_hiding">;</span><br/>
            <span id="s33_hiding" class="keywords">while </span>
            <span id="s34_hiding" >(isMissed){</span><br/>
            <span id="s35_hiding" >Mr_12.waitFor(Miss_11:30);</span>
            <span id="s36_hiding" >isMissed = Miss_11:30.reply();</span><br/>
            <span id="s37_hiding" >}</span><br/>
            <span id="s38_hiding" class="comments">//Time was flying when you desire to seize it.and now it was 11:30.</span><br/>
            <span id="s39_hiding" >time.flying();</span><br/>
            <span id="s40_hiding" class="keywords">if</span>
            <span id="s41_hiding" >(time.</span>
            <span id="s42_hiding" class="keywords">value</span>
            <span id="s43_hiding" > = </span>
            <span id="s44_hiding" class="string">"11:30"</span>
            <span id="s45_hiding" > ) {</span><br/>
            <span id="s46_hiding" >Mr_12.say(</span>
            <span id="s47_hiding" class="string">"sweet dream"</span>
            <span id="s48_hiding" >);</span><br/>
            <span id="s49_hiding" >Miss_11:30.sleep(</span>
            <span id="s50_hiding" class="string">"feel better after chating"</span>
            <span id="s51_hiding" >);</span><br/>
            <span id="s52_hiding" >}</span><br/>
            <span id="s53_hiding" class="comments">//Sometimes,when Miss_11:30 had no reply for several days, Mr_12 became a little sad and felt something go wrong.</span><br/>
        </div>
        <div id="code">

            <span id="s1" class="comments"></span><br/>
            <span id="s2"></span>
            <span id="s3" class="keywords"></span>
            <span id="s4"></span>
            <span id="s5" class="string"></span>
            <span id="s6"></span><br/>
            <span id="s7"></span>
            <span id="s8" class="keywords"></span>
            <span id="s9"></span>
            <span id="s10" class="string"></span>
            <span id="s11"></span><br/>
            <span id="s12" class="comments"></span><br/>
            <span id="s13" ></span>
            <span id="s14" class="string"></span>
            <span id="s15"></span><br/>
            <span id="s16" class="comments"></span><br/>
            <span id="s17" class="keywords"></span>
            <span id="s18" ></span>
            <span id="s19" class="keywords"></span>
            <span id="s20" ></span><br/>
            <span id="s21" class="keywords"></span>
            <span id="s22" ></span><br/>
            <span id="s23" class="comments"></span><br/>
            <span id="s24" ></span>
            <span id="s25" class="string"></span>
            <span id="s26"></span><br/>
            <span id="s27"></span><br/>
            <span id="s28" class="comments"></span><br/>
            <span id="s29" class="keywords"></span>
            <span id="s30" ></span>
            <span id="s31" class="keywords"></span>
            <span id="s32"></span><br/>
            <span id="s33" class="keywords"></span>
            <span id="s34" ></span><br/>
            <span id="s35" ></span><br/>
            <span id="s36" ></span><br/>
            <span id="s37" ></span><br/>
            <span id="s38" class="comments"></span><br/>
            <span id="s39" ></span><br/>
            <span id="s40" class="keywords"></span>
            <span id="s41" ></span>
            <span id="s42" class="keywords"></span>
            <span id="s43" >  </span>
            <span id="s44" class="string"></span>
            <span id="s45" ></span><br/>
            <span id="s46" ></span>
            <span id="s47" class="string"></span>
            <span id="s48" ></span><br/>
            <span id="s49" ></span>
            <span id="s50" class="string"></span>
            <span id="s51" ></span><br/>
            <span id="s52" ></span><br/>
            <span id="s53" class="comments"></span><br/>
        </div>
    </div>
</body>
</html>